<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
    <style type="text/css">
        /* .container {} */

        .container .cart {
            width: 300px;
            margin: auto;
        }

        .container .title {
            background-color: lightblue;
            height: 40px;
            line-height: 40px;
            text-align: center;
            /*color: #fff;*/
        }

        .container .total {
            background-color: #FFCE46;
            height: 50px;
            line-height: 50px;
            text-align: right;
        }

        .container .total button {
            margin: 0 10px;
            background-color: #DC4C40;
            height: 35px;
            width: 80px;
            border: 0;
        }

        .container .total span {
            color: red;
            font-weight: bold;
        }

        .container .item {
            height: 55px;
            line-height: 55px;
            position: relative;
            border-top: 1px solid #ADD8E6;
        }

        .container .item img {
            width: 45px;
            height: 45px;
            margin: 5px;
        }

        .container .item .name {
            position: absolute;
            width: 90px;
            top: 0;
            left: 55px;
            font-size: 16px;
        }

        .container .item .change {
            width: 100px;
            position: absolute;
            top: 0;
            right: 50px;
        }

        .container .item .change a {
            font-size: 20px;
            width: 30px;
            text-decoration: none;
            background-color: lightgray;
            vertical-align: middle;
        }

        .container .item .change .num {
            width: 40px;
            height: 25px;
        }

        .container .item .del {
            position: absolute;
            top: 0;
            right: 0px;
            width: 40px;
            text-align: center;
            font-size: 40px;
            cursor: pointer;
            color: red;
        }

        .container .item .del:hover {
            background-color: orange;
        }
    </style>
</head>

<body>
    <div id='app'>
        <shop-car></shop-car>
    </div>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js'></script>
    <script>
        // 标题组件
        const cartTitle = {
            template: `<div class="title">张三的商品</div>`
        }
        // 列表组件
        const cartList = {
            template: `  <div>
                            <div class="item">
                                <img src="img/a.jpg" />
                                <div class="name">TCL彩电</div>
                                <div class="change">
                                <a href="">－</a> <input type="text" class="num" value="1" />
                                <a href="">＋</a>
                                </div>
                                <div class="del">×</div>
                            </div>
                            <div class="item">
                                <img src="img/b.jpg" />
                                <div class="name">机顶盒</div>
                                <div class="change">
                                <a href="">－</a> <input type="text" class="num" />
                                <a href="">＋</a>
                                </div>
                                <div class="del">×</div>
                            </div>
                            <div class="item">
                                <img src="img/c.jpg" />
                                <div class="name">海尔冰箱</div>
                                <div class="change">
                                <a href="">－</a> <input type="text" class="num" />
                                <a href="">＋</a>
                                </div>
                                <div class="del">×</div>
                            </div>
                            <div class="item">
                                <img src="img/d.jpg" />
                                <div class="name">小米手机</div>
                                <div class="change">
                                <a href="">－</a> <input type="text" class="num" />
                                <a href="">＋</a>
                                </div>
                                <div class="del">×</div>
                            </div>
                            <div class="item">
                                <img src="img/e.jpg" />
                                <div class="name">PPTV电视</div>
                                <div class="change">
                                <a href="">－</a> <input type="text" class="num" />
                                <a href="">＋</a>
                                </div>
                                <div class="del">×</div>
                            </div>
                        </div>`
        }
        // 结算组件
        const cartTotal = {
            template: `<div class="total"><span>总价：6000</span> <button>结算</button></div>`
        }

        // 购物车组件
        Vue.component('shop-car', {
            template: `
            <div class="container">
                <div class="cart">
                    
                    <cart-title></cart-title>
                   
                    <cart-list></cart-list>
                 
                    <cart-total></cart-total>
                </div>
            </div>
            `,
            components: {
                'cart-title': cartTitle,
                'cart-list': cartList,
                'cart-total': cartTotal
            }
        })

        const vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
        })
    </script>
</body>

</html>